<template>
  <div>
    <!-- 表格 -->
    <div>
      <el-table :data="goodsList" style="width: 100%" stripe @selection-change="selectChange" ref="goodsTable">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="图片" align="center"> 
          <template slot-scope="scope">
            <!-- eslint-disable-next-line -->
            <l-pic v-for="(item, index) in scope.row.pic_urls.split(',')" :key="index" v-if="item!==''"
                :picurl="item" :size="{width:40,height:40}" :disdel="false" :disview="false"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="price" label="价格" align="center"></el-table-column>
      </el-table>
    </div>
    
    <!-- 分页 -->
    <div style="text-align:right;margin:15px 15px">
      <el-pagination class="page"
        background
        layout="total, prev, pager, next, jumper"
        :total="count"
        :page-size="10"
        :current-page="page"
        @size-change="changePage"
        @current-change="changePage">
      </el-pagination>
    </div>
    
    <!-- 提交 -->
    <div style="text-align:center;margin-top:25px">
      <el-button type="primary" style="padding:8px 20px" @click="submit">保 存</el-button>
    </div>
  </div>
</template>

<script>
import LPic from '@/components/lPic'
import { getGoodsList } from '@/api/goods'
import { getTuanGoodsList, putTuanGoodsList } from '@/api/customers'

export default {
  name: 'addGoods',
  components: {
    LPic
  },
  props: {
    tuanId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      page: 1,
      count: 1,
      goodsList: [],
      tuanGoodsList: {},
      selectGoods: [],
    }
  },
  watch: {
    tuanGoodsList(newData) {
      newData.goods_ids.forEach(item => {
        if(item!==''){
          const goods = this.goodsList.find(goods => goods.id === item)
          this.selectGoods.push(goods);
          this.$refs.goodsTable.toggleRowSelection(goods);
        }        
      });
    }
  },
  mounted() {
    this.getGoodsList();
    
  },
  methods: {
    /**
     * 获取商品列表
     */
    getGoodsList() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        page: this.page,
        limit: 10,
      };
      getGoodsList(params).then(res => {
        if(res.status === 200){
          this.goodsList = res.data;
          this.count = parseInt(res.count);
          this.getTuanGoodsList();
        }else if(res.status === 204){
          this.goodsList = [];
          this.count = 1;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 获取团长绑定商品列表
     */
    getTuanGoodsList() {
      const params = { id: this.tuanId, key: this.$store.state.app.activeApp.saa_key };
      getTuanGoodsList(params).then(res => {
        if(res.status === 200){
          this.tuanGoodsList = res.data;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 翻页
     */
    changePage(page) {
      this.page = page;
      this.getGoodsList();
    },
    /**
     * 修改选择
     */
    selectChange(select) {
      this.selectGoods = select;
    },
    /**
     * 提交
     */
    submit() {
      const params = { id:this.tuanId, goods_ids: [''], key: this.$store.state.app.activeApp.saa_key };
      this.selectGoods.forEach(item => {
        params.goods_ids.push(item.id);
      });
      putTuanGoodsList(params).then(res => {
        if(res.status === 200){
          this.$emit('success');
        }else{
          this.$message.error(res.message);
        }
      })
    }
  },
}
</script>